<template>
  <ph-view>
    <ph-blockquote type="primary">该组件为独立组件<br/><a href="https://www.npmjs.com/package/ph-select" target="_blank">npm 地址</a></ph-blockquote>
    <ph-blockquote type="warning">
      note： PhFormSelect (凡是PhForm为前缀的)
      表单组件需要以PhForm作为为父组件工作，如需单独使用，如下：
      <br />
      import {PhSelect} from "ph-form"
      用法同上但是没有验证功能
    </ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="ph-form-select案例">
        <ph-form>
          <ph-divider>默认</ph-divider>
          <ph-form-select
<<<<<<< HEAD
            style="max-width: 300px"
            :value="pro"
            placeholder="可以配置"
            @ph-change="onProChange"
=======
            style="max-width: 290px"
            v-model="pro"
            placeholder="可以配置"
            
>>>>>>> dev
          >
            <ph-option
              :value="opt.value"
              v-for="opt in pros"
              :key="opt.value"
              >{{ opt.text }}</ph-option
            >
          </ph-form-select>
          <ph-pretty>{{ demo1 }}</ph-pretty>
          <ph-divider>多选</ph-divider>
          <ph-form-select
<<<<<<< HEAD
            style="max-width: 300px"
            title="职业选择"
            :value="pro1"
            placeholder="可以配置"
            @ph-change="onPro1Change"
            theme="dark"
            :multiple="true"
          >
            <ph-option
              :value="opt.value"
              v-for="opt in pros"
              :key="opt.value"
              >{{ opt.text }}</ph-option
            >
          </ph-form-select>
          <ph-divider>theme:dark</ph-divider>
          <ph-form-select
            style="max-width: 300px"
            title="职业选择"
            :value="pro1"
            placeholder="可以配置"
            @ph-change="onPro1Change"
=======
            style="max-width: 290px"
            title="职业选择"
            v-model="pro1"
            placeholder="可以配置"
            
>>>>>>> dev
            :multiple="true"
          >
            <ph-option
              :value="opt.value"
              v-for="opt in pros"
              :key="opt.value"
              >{{ opt.text }}</ph-option
            >
          </ph-form-select>
          <ph-divider>theme:dark</ph-divider>
          <ph-form-select
            style="max-width: 290px"
            title="职业选择"
            v-model="pro1"
            placeholder="可以配置"
            
            :multiple="true"
            theme="dark"
          >
            <ph-option
              :value="opt.value"
              v-for="opt in pros"
              :key="opt.value"
              >{{ opt.text }}</ph-option
            >
          </ph-form-select>
          <ph-pretty>{{ demo2 }}</ph-pretty>
          <ph-divider>禁止</ph-divider>
          <ph-form-select
<<<<<<< HEAD
            style="max-width: 300px"
            :value="pro"
            placeholder="可以配置"
            @ph-change="onProChange"
=======
            style="max-width: 290px"
            v-model="pro"
            placeholder="可以配置"
            
>>>>>>> dev
            :disabled="true"
          >
            <ph-option
              v-model="opt.value"
              v-for="opt in pros"
              :key="opt.value"
              >{{ opt.text }}</ph-option
            >
          </ph-form-select>
          <ph-pretty>{{ demo3 }}</ph-pretty>
          <ph-divider>align</ph-divider>
          <ph-form-select
<<<<<<< HEAD
            style="max-width: 300px"
            :value="pro"
            placeholder="可以配置"
            @ph-change="onProChange"
=======
            style="max-width: 290px"
            v-model="pro"
            placeholder="可以配置"
            
>>>>>>> dev
            align="center"
          >
            <ph-option
              :value="opt.value"
              v-for="opt in pros"
              :key="opt.value"
              >{{ opt.text }}</ph-option
            >
          </ph-form-select>
          <ph-pretty>{{ demo4 }}</ph-pretty>
        </ph-form>
      </ph-tab-panel>
      <ph-tab-panel title="ph-select案例">
        <ph-blockquote type="primary">该组件为独立组件<br/><a href="https://www.npmjs.com/package/ph-select" target="_blank">npm 地址</a></ph-blockquote>
        <ph-divider>默认</ph-divider>
<<<<<<< HEAD
        <ph-select style="max-width: 300px" :value="pro" @change="onProChange" theme="dark" placeholder="可以配置">
=======
        <ph-select style="max-width: 290px" :value="pro" @change="onProChange" theme="dark" placeholder="可以配置">
>>>>>>> dev
          <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{
            opt.text
          }}</ph-option>
        </ph-select>
        <ph-pretty>{{ demo1 }}</ph-pretty>
        <ph-divider>多选</ph-divider>
        <ph-select
<<<<<<< HEAD
          style="max-width: 300px"
=======
          style="max-width: 290px"
>>>>>>> dev
          title="职业选择"
          :value="pro1"
          @change="onPro1Change"
          :multiple="true"
           theme="dark"
        >
          <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{
            opt.text
          }}</ph-option>
        </ph-select>
        <ph-pretty>{{ demo2 }}</ph-pretty>
        <ph-divider>禁止</ph-divider>
        <ph-select
<<<<<<< HEAD
          style="max-width: 300px"
=======
          style="max-width: 290px"
>>>>>>> dev
          :value="pro"
          @change="onProChange"
          :disabled="true"
          placeholder="可以配置"
        >
          <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{
            opt.text
          }}</ph-option>
        </ph-select>
        <ph-pretty>{{ demo3 }}</ph-pretty>
        <ph-divider>align</ph-divider>
        <ph-select
<<<<<<< HEAD
          style="max-width: 300px"
=======
          style="max-width: 290px"
>>>>>>> dev
          :value="pro"
          @change="onProChange"
          align="center"
          placeholder="可以配置"
        >
          <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{
            opt.text
          }}</ph-option>
        </ph-select>
        <ph-pretty>{{ demo4 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="script">
        <ph-pretty>{{ script }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import {
  PhView,
  PhBlockquote,
  PhForm,
  PhFormSelect,
  PhSelect,
  PhOption,
  PhDivider,
  PhTabPanel,
  PhTab,
} from "@/index";
import * as Data from "../data/select-input";
export default defineComponent({
  components: {
    PhView,
    PhBlockquote,
    PhForm,
    PhFormSelect,
    PhSelect,
    PhOption,
    PhDivider,
    PhTabPanel,
    PhTab,
  },
  setup() {
    const formData = reactive({
      pro: 1,
      pro1: [1],
      pros: [
        {
          value: 1,
          text: "老师",
        },
        {
          value: 2,
          text: "学生",
        },
        {
          value: 3,
          text: "皮卡丘",
        },
        {
          value: 4,
          text: "路飞",
        },
        {
          value: 5,
          text: "萨斯给",
        },
      ],
    });

    const onProChange = (v: number) => {
      formData.pro = v;
    };
    const onPro1Change = (v: number[]) => {
      formData.pro1 = v;
    };
    return {
      ...toRefs(formData),
      onProChange,
      onPro1Change,
      ...Data,
    };
  },
});
</script>
